<template>
    <div id="homePage">
         <!--筛选-->
         <div class="campus" >
                <span @click="show()">{{currentDataUser.schoolName}}</span>
                <img src="../assets/homepage/drop-green.png" alt="">
         </div>
         <!--筛选弹出框-->
        <div v-show="showDio" class="popup">
           <div class="supercampus">
                <p @click="changeSchool($event,item)" v-for="(item,index) in allSchoolData"><span style="display:inline-block;width:95%">{{item.name}}</span><span style="display:none" v-bind:class={schoolSpan:item.active}>√</span></p>
            </div>
        </div>
        <div v-show="model" @click="show()" class="modal"></div>
        <div v-show="modelCh" @click=" modelCh = false;showDioCh = false;showPrice=false;showStu=false;showType=false" class="modalCh"></div>
         <!--轮播图-->
        <mt-swipe id="head" :auto="10000">
            <mt-swipe-item><img src="../assets/11111.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../assets/22222.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../assets/33333.jpg" alt=""></mt-swipe-item>
        </mt-swipe>
        <!--各种筛选-->
        <ul id="menu">
            <li  @click="showCh('1')">价格<img v-bind:class={homeImgTr:showPrice} src="../assets/homepage/drop-green.png" alt=""></li>
            <li  @click="showCh('2')">状态<img v-bind:class={homeImgTr:showStu} src="../assets/homepage/drop-green.png" alt=""></li>
            <li  @click="showCh('3')">类型<img v-bind:class={homeImgTr:showType} src="../assets/homepage/drop-green.png" alt=""></li>
        </ul>
        <div v-show="showDioCh" class="popupCh">
            <div id="container">
                <div v-show="showPrice">
                    <p v-for="(item,index) in sortData[0]" @click="showChDis(index+1,item,'0',index)"><span>{{item.text}}</span><span style="display:none" v-bind:class={schoolSpan:item.active}>√</span></p>
                </div>
                <div  v-show="showStu">
                    <p v-for="(item,index) in sortData[1]" @click="showChDis(index+3,item,'1',index)"><span>{{item.text}}</span><span style="display:none" v-bind:class={schoolSpan:item.active}>√</span></p>
                </div>
                <div v-show="showType">
                    <p v-for="(item,index) in sortData[2]" @click="showChDis(index+6,item,'2',index)"><span>{{item.text}}</span><span style="display:none" v-bind:class={schoolSpan:item.active}>√</span></p>
                </div>
            </div>
        </div>
         <!--详情卡片组-->
        <mt-loadmore ref="loadmore" :top-method="loadTop" @top-status-change="handleTopChange" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false"  id="scrollCho">
                <div v-for="item in showData">
                       <!--跑腿-->
                        <div id="details" v-if="item.taskType==1||item.taskType==2||item.taskType==5||item.taskType==6||item.taskType==7">
                            <div id="left">
                                <img :src="item.headPortrait">
                            </div>
                            <div id="centre" style="width:60%;">
                                <div class="time">{{turnTime(item.initiatorTime)}} <span>前发布{{item.taskType}}</span></div>
                                <div class="taskDetails"><span v-if="item.taskExplain.length>=66">{{lengthSub(item.taskExplain,'homeDetail')}}</span><span v-if="item.taskExplain.length<66">{{item.taskExplain}}</span>
                                    <p style="margin-top:0.75rem;" v-if="item.taskType==6">
                                        <img style="height:5rem;width:5rem;" :src="item.common1" alt="">
                                        <img style="height:5rem;width:5rem;" :src="item.common2" alt="">
                                    </p>
                                </div>
                                <div id="StuIcon">
                                    <div class="alterDetails" style="display:flex;">
                                        <img src="../assets/homepage/details.png" alt="">
                                        <p style="font-size:0.45rem;" @click="checkDetail(item.id,item.taskType)">详情</p>
                                    </div>
                                    <div class="stu">
                                        <img  src="../assets/homepage/yes.png" alt="">
                                        <p style="font-size:0.45rem;"><span v-if="item.status=='1'">未接单</span><span v-if="item.status=='2'">已接单</span><span v-if="item.status=='3'">已完结</span></p>
                                    </div>
                                </div>
                            </div>
                            <div id="right">
                                <div class="sex">
                                    <img v-if="item.womanSum==1" src="../assets/me/women.png" alt="">
                                    <img v-if="item.manSum==1" src="../assets/me/male.png" alt="">
                                    <img v-if="item.allSum==1" src="../assets/me/gender.png" alt="">
                                    <span v-if="item.womanSum==1">只限女生</span>
                                    <span v-if="item.manSum==1">只限男生</span>
                                    <span v-if="item.allSum==1">不限性别</span>
                                </div>
                                <div class="money">
                                    {{item.amount}} <span>￥</span>
                                </div>
                            </div>
                        </div>
                     <!--快递-->
                    <div id='details' v-if="item.taskType==3">
                        <div id="left">
                            <img :src="item.headPortrait">
                        </div>
                        <div id="centre" style="width:60%;">
                            <div class="time">{{turnTime(item.initiatorTime)}} <span>前发布{{item.taskType}}</span></div>
                            <div class="taskDetails">
                                接单后查看详情
                                <div style="width:13rem;height:1.25rem;line-height:1.25rem;font-size:0.5rem;display:flex;">
                                    <p style="width:1.5rem">{{item.common1}}</p>
                                    <img style="margin:0.3rem 0.15rem;width:5rem;height:0.5rem;"src="../assets/homepage/line.png" alt="">
                                    <p style="width:1.5rem;position:relative;right:3.5rem;">{{item.common2}}</p>
                                    <p style="position:relative;right:1.5rem;">#{{indexTurnAddress(item.taskLocation)}}</p>
                                </div>
                            </div>

                            <div id="StuIcon">
                                <div class="alterDetails" style="display:flex;">
                                    <img src="../assets/homepage/details.png" alt="">
                                    <p style="font-size:0.45rem;" @click="checkDetail(item.id,item.taskType)">详情</p>
                                </div>
                                <div class="stu">
                                    <img  src="../assets/homepage/yes.png" alt="">
                                    <p style="font-size:0.45rem;"><span v-if="item.status=='1'">未接单</span><span v-if="item.status=='2'">已接单</span><span v-if="item.status=='3'">已完结</span></p>
                                </div>
                            </div>
                        </div>
                        <div id="right">
                            <div class="sex">
                                    <img v-if="item.womanSum==1" src="../assets/me/women.png" alt="">
                                    <img v-if="item.manSum==1" src="../assets/me/male.png" alt="">
                                    <img v-if="item.allSum==1" src="../assets/me/gender.png" alt="">
                                    <span v-if="item.womanSum==1">只限女生</span>
                                    <span v-if="item.manSum==1">只限男生</span>
                                    <span v-if="item.allSum==1">不限性别</span>
                            </div>
                            <div class="money">
                                 {{item.amount}} <span>￥</span>
                            </div>
                        </div>
                    </div>
                </div>
          <div slot="top" class="mint-loadmore-top">
            <span style="position:relative" v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">请往下拉，松开即可刷新</span>
            <span v-show="topStatus === 'loading'"><img style="width:20rem;height:6rem;position:absolute;top:1rem;z-index:-11;margin-left:-10rem;" src="../assets/homepage/Refresh.png" alt=""></span>
          </div>

                 <!--底部判断是加载图标还是提示“全部加载”-->

                    <!--<mt-spinner type="fading-circle" color="#2AA094" :size="20"></mt-spinner>-->

          <div v-show="moreLoading" style="text-align: center;line-height: 2rem">数据已全部加载</div>

        </mt-loadmore>

    </div>
</template>
<script>
import turnTime from '../server/dataTime.js'
import indexTurnAddress from '../server/indexTurnAddress.js'
import lengthSub from '../server/lengthSub.js'
    export default {
        data(){
            return{
                lengthSub:lengthSub,
                homeActive:[false,false,false],
                search:{},
                topStatus: '',
                 //初始化无限加载相关参数
                queryLoading: false,
                moreLoading: false,
                allLoaded: false,
                sortData:[
                    [
                        {text:'从低到高',active:false},
                        {text:'从高到低',active:false},
                    ],
                    [
                        {text:'未接单',active:false},
                        {text:'已接单',active:false},
                        {text:'已完结',active:false},
                    ],
                    [
                        {text:'跑腿任务',active:false},
                        {text:'替身任务',active:false},
                        {text:'快递代取',active:false},
                        {text:'打印任务',active:false},
                        {text:'兼职任务',active:false},
                        {text:'二手买卖',active:false},
                    ],
                ],
                allSchoolData:undefined,
                currentDataUser:{
                    schoolName:undefined,
                    schoolId:undefined,

                },
                indexTurnAddress:indexTurnAddress,
                turnTime:turnTime,
                forms: {
                    pageSize: 10,
                    pageNumber: 1,
                    schoolId:undefined,
                },
               showData:[],
               showPrice:false,
               showStu:false,
               showType:false,
               school:'福州大学',
               showDio:false,
               showDioCh:false,
               model:false,
               modelCh:false,
              topDistance: 0
            }
        },
        created(){
             this.getAllSchoolData()
        },
        methods:{
            loadTop(){
                this.forms.pageNumber = 1;
                this.$api.getTaskData(this.forms).then((res)=>{
                    if(res.code=='000000'){
                      this.$refs.loadmore.onTopLoaded();
                        this.showData = res.data.list
                    }
                })
                // this.getTaskData();
            },
            handleTopChange(status) {
                this.topStatus = status;
            },
            //无限加载函数
            loadMore() {
                this.forms.pageNumber = Number(this.forms.pageNumber)+1
                this.$api.getTaskData(this.forms).then((res)=>{
                if(res.code=='000000'){
                  this.$refs.loadmore.onTopLoaded();

                  res.data.list.forEach((item)=>{
                    if(item.taskExplain.length>=66){
                      item.taskExplain = item.taskExplain.substring(0,66)+'....'
                    }
                    this.showData.push(item)
                  })
                  if (res.data.pageNumber === res.data.totalPage) {
                    this.moreLoading = true
                  }else {
                    this.moreLoading = false
                  }
                }
              })

            },
            // 获取全部学校信息
            getAllSchoolData(){
                this.$api.getAllSchool().then((res)=>{
                    if(res.code=='000000'){
                        this.allSchoolData = res.data
                        this.allSchoolData.forEach((item)=>{
                            item.active = false;
                        })
                      this.getCurrUser()
                    }
                })
            },
            // 获取当前登录的用户信息
            getCurrUser(){
                this.$api.currUser().then((res)=>{
                    if(res.code=='000000'){
                        localStorage.setItem('confirm', JSON.stringify(res.data));
                        this.currentDataUser.schoolName = res.data.schoolName;
                        this.allSchoolData.forEach((item)=>{
                            if(item.name==res.data.schoolName){
                                item.active = true;
                            }
                        })
                        this.currentDataUser.schoolId = res.data.schoolId
                        this.forms.schoolId = res.data.schoolId
                        this.getTaskData()
                    }
                })
            },
            // 查看详情
            checkDetail(id,type){
                if(type==3){
                    this.$router.push({path: '/Express/'+id})
                }
                if(type==1||type==2){
                    this.$router.push({path: '/Double/'+id})
                }
                if(type==6||type==7){
                    this.$router.push({path: '/secHand/'+id})
                }
                if(type==5){
                     this.$router.push({path: '/partTime/'+id})
                }
            },
            // 获取全部任务数据
            getTaskData(){
                this.$api.getTaskData(this.forms).then((res)=>{
                    if(res.code=='000000'){
                      this.$refs.loadmore.onTopLoaded();
                        res.data.list.forEach((item)=>{
                            this.showData.push(item)
                        })
                      if (res.data.pageNumber === res.data.totalPage) {
                        this.moreLoading = true
                      }
                    }
                })
            },
            // 改变学校
            changeSchool(e,item){
                console.log(e.target.innerHTML.length)
                this.currentDataUser.schoolName = e.target.innerHTML;
                 for (var i = 0; i < this.allSchoolData.length; i++) {
                        this.allSchoolData[i].active = false;
                    }
                    item.active = true;
                this.currentDataUser.schoolId = item.id;
                var obj = {};
                obj.pageSize = 10;
                obj.pageNumber = 1;
                obj.schoolId = item.id;
                 this.$api.getTaskData(obj).then((res)=>{
                    if(res.code=='000000'){
                        this.showData = res.data.list;
                    }
                })
                this.showDio = !this.showDio;
                this.model = !this.model;
            },
            show(){
                if(this.modelCh==true||this.showDioCh==true){
                     this.showDioCh = false;
                     this.modelCh = false;
                }
                this.showDio = !this.showDio;
                this.model = !this.model;
            },
             showCh(val){
                  if(this.showDio==true||this.model==true){
                      this.showDio = false;
                      this.model = false;
                }
                this.showDioCh = true;
                this.modelCh = true;
                if(val=='1'){
                    // for(let i=0;i<3;i++){
                    //     this.homeActive[i] = false
                    // }
                    // this.homeActive[0] = true
                    this.showPrice = true;
                    this.showStu = false;
                    this.showType = false;
                }
                if(val=='2'){
                    this.showPrice = false;
                    this.showStu = true;
                    this.showType = false;
                }
                if(val=='3'){
                    this.showPrice = false;
                    this.showStu = false;
                    this.showType = true;
                }
            },
            // 排序
            showChDis(val,item,allindex,index){
                this.showPrice = false;
                this.showStu = false;
                this.showType = false;
                delete this.forms.orderBy;
                delete this.forms.status;
                delete this.forms.taskType;
                this.modelCh = false;
                this.showDioCh = false;
                this.sortData.forEach((item)=>{
                    for (var i = 0; i < item.length; i++) {
                        item[i].active = false;
                    }
                })
                this.sortData[allindex][index].active = true
                switch (Number(val))
                {
                    case 1:this.forms.orderBy='2';
                    break;
                    case 2:this.forms.orderBy='1';
                    break;
                    case 3:this.forms.status='1';
                    break;
                    case 4:this.forms.status='2';
                    break;
                    case 5:this.forms.status='3';
                    break;
                    case 6:this.forms.taskType='1';
                    break;
                    case 7:this.forms.taskType='2';
                    break;
                    case 8:this.forms.taskType='3';
                    break;
                    case 9:this.forms.taskType='4';
                    break;
                    case 10:this.forms.taskType='5';
                    break;
                    case 11:this.forms.taskType='6';
                    break;
                }
                this.forms.pageSize = 10;
                this.forms.pageNumber = 1;
                this.forms.schoolId = this.forms.schoolId;
                 this.$api.getTaskData(this.forms).then((res)=>{
                    if(res.code=='000000'){
                        this.showData = res.data.list;
                    }
                })
            }
        }
    }
</script>
<style lang="">
.homeImgTr{
    transform:rotate(180deg);
}

#homePage .schoolSpan{
   display:inline-block!important;
   float:right;
}
#container{
    width:100%;
    position:absolute;
    z-index:1;
    background:#ffffff;
    color:#2AA094;
    font-size:0.8rem;
    padding:0 5%;
}
#container p{
    height:2rem;
    line-height:2rem;
}
#menu{
    display:flex;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
    font-size:0.8rem;
    letter-spacing:0.15rem;
    color:#2AA094;
    background:#ffffff;
}
 #menu li{
    width:33.333%;
    list-style-type:none;
}
#head{
  height:8rem;
  width:100%;
}
#head img{
    height:100%;
    width:100%;
}
#homePage .supercampus{
    width:100%;
    background:#ffffff;
    color:#2AA094;
    font-size:0.8rem;
    padding:0 5%;
}
#homePage .campus{
    text-align:right;
    height:1.5rem;
    line-height:1.5rem;
    font-size:0.8rem;
    font-size:0.8rem;
    color:#2AA094;
    background-color:rgba(255,255,255,0.1);
    padding-right:0.5rem;
}
#homePage .popup{
    height:5rem;
    background-color:white;
    width:100%;
    position:absolute;
    top:1.5rem;
    left:0;
    z-index:200;
}
#homePage .popupCh{
    height:5rem;
    background-color:white;
    width:100%;
    position:absolute;
    top:12rem;
    left:0;
    z-index:200;
}
#homePage .modal{
    height:88%;
    width:100%;
    background-color:#000;
    opacity:0.5;
    position:absolute;
    top:12%;
    left:0;
    z-index:100;
}
#homePage .modalCh{
    height:88%;
    width:100%;
    background-color:#000;
    opacity:0.5;
    position:absolute;
    top:12rem;
    left:0;
    z-index:100;
}
#scrollCho{
  position: absolute;
  top: 11.6rem;
  bottom: 3.4rem;
  left: 0;
  right: 0;
  overflow-y: auto;
}
#homePage .supercampus{
    width:100%;
    background:#ffffff;
    color:#2AA094;
    font-size:0.8rem;
    padding:0.5rem 1rem;
}
#homePage .supercampus p{
    height:1.5rem;
    line-height:1.5rem;
}
#head{
  height:8rem;
  width:100%;
}
#head img{
    height:100%;
    width:100%;
}
#menu{
    display:flex;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
    font-size:0.8rem;
    letter-spacing:0.15rem;
    color:#2AA094;
    background:#ffffff;
}
 #menu li{
    width:33.333%;
    list-style-type:none;
}
 #menu li img{
     width:0.7rem;
     height:0.3rem;
 }
#container{
    width:100%;
    position:absolute;
    z-index:1;
    background:#ffffff;
    color:#2AA094;
    font-size:0.8rem;
    padding:0 5%;
}
#container p{
    height:2rem;
    line-height:2rem;
}
.mint-swipe-items-wrap > div {
    font-size:1.5rem;
    text-align:center;
    position: absolute;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 100%;
    height: 100%;
    line-height:5rem;
    display: none;
}
#homePage #details{
    width:100%;
    padding:1rem 3% 0.25rem;
    display:flex;
    margin-top:1rem;
    background:#fff;
}
#homePage #left{
    width:16%;
}
#homePage #left img{
    height:3.2rem;
    width:3.2rem;
    border:1px solid #DCDFE6;
    border-radius:50%;
}
#homePage #centre{
    width:60%;
}
#homePage #centre .time{
    font-size:0.8rem;
    height:1.2rem;
    color:#8a8a8a;
}
#homePage #centre .taskDetails{
    font-size:0.7rem;
    color:#393a3f;
}
#homePage #StuIcon{
    margin-top:1rem;
    width:100%;
    line-height:1.5rem;
    display:flex;
    justify-content:space-between;
}
#homePage #StuIcon .alterDetails{
    display:flex;
}
#homePage #StuIcon .alterDetails img{
    width:0.8rem;
    height:0.8rem;
    margin:0.35rem;
}
#homePage #StuIcon .stu{
    display:flex;
}
#homePage #StuIcon .stu img{
    float:left;
    width:0.8rem;
    height:0.8rem;
    margin:0.35rem;
}
#homePage #right{
    width:25%;
}
#homePage #right .sex{
    font-size:0.8rem;
    color:#8a8a8a;
}
#homePage #right .sex img{
    width:0.8rem;
    height:0.8rem;
}
#homePage #right .money{
    height:3.5rem;
    line-height:3.5rem;
    width:5rem;
    text-align:center;
    font-size:1.2rem;
    color:#2AA094;
}
#homePage #priceWindow,#stuWindow,#typeWindow{
    background-color:#4c4c4c;
    width: 100%;
    height: 68%;
    left: 0;
    top: 32%;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 1;
    position: absolute;
}
#homePage #topWindow{
    background-color:#4c4c4c;
    width: 100%;
    height: 82%;
    left: 0;
    top: 18%;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 2;
    position: absolute;
}
</style>
